<template>
  <div>
    <div class="top">
      <ul>
        <li
          ><span>11</span>
          <p>待揽件</p>
        </li>
        <li
          ><span>22</span>
          <p>已揽件</p>
        </li>
        <li
          ><span>33</span>
          <p>派送中</p>
        </li>
        <li
          ><span>44</span>
          <p>已签收</p>
        </li>
        <li class="border-left"
          ><span>55</span>
          <p>系统生成物流</p>
        </li>
        <li
          ><span>66</span>
          <p>手动输入物流</p>
        </li>
        <li class="border-left"
          ><span>77</span>
          <p>物流总数</p>
        </li>
      </ul>
    </div>
    <div class="app-container">
      <div class="app-container-inner">
        <div class="header">
          <div class="update">
            <HPlainButton @click="update">更新物流状态</HPlainButton>
          </div>
          <div class="search">
            <el-select
              v-model="value1"
              placeholder="请选择"
              filterable
              clearable
              style="width: 6vw"
            >
              <el-option v-for="item in options" :key="item.value" :value="item.value" />
            </el-select>
            <el-select
              v-model="value2"
              placeholder="请选择"
              filterable
              clearable
              style="width: 6vw"
            >
              <el-option v-for="item in options" :key="item.value" :value="item.value" />
            </el-select>
            <el-select
              v-model="value3"
              placeholder="请选择"
              filterable
              clearable
              style="width: 6vw"
            >
              <el-option v-for="item in options" :key="item.value" :value="item.value" />
            </el-select>
            <!-- 日期范围 -->
            <DateRange ref="dateRangeRef" @change="handleDateChange" />
            <el-input v-model="input" placeholder="检索" style="width: 14vw !important">
              <template #prepend>
                <el-select style="width: 5vw" v-model="select" placeholder="选择">
                  <el-option label="工单编号" value="1" />
                  <el-option label="工单编号" value="2" />
                  <el-option label="工单编号" value="3" />
                </el-select>
              </template>
              <template #append>
                <el-button :icon="Search" />
              </template>
            </el-input>
          </div>
        </div>
        <div class="table">
          <el-table
            border
            stripe
            resizable
            :data="tableData"
            row-key="id"
            height="68vh"
            @selection-change="handleChange"
          >
            <el-table-column show-overflow-tooltip type="selection" width="50" />
            <el-table-column
              show-overflow-tooltip
              type="index"
              :index="indexMethod"
              label="序号"
              width="50"
            />
            <el-table-column show-overflow-tooltip prop="name" label="物流编号" width="200" />
            <el-table-column show-overflow-tooltip prop="date" label="物流单号" width="200" />
            <el-table-column show-overflow-tooltip prop="state" label="物流方式" width="120" />
            <el-table-column show-overflow-tooltip prop="city" label="出货单据" width="200" />
            <el-table-column show-overflow-tooltip prop="state" label="收货地址" min-width="400" />
            <el-table-column show-overflow-tooltip prop="address" label="更新时间" width="200" />
            <el-table-column show-overflow-tooltip prop="city" label="物流状态" width="120" />
            <el-table-column fixed="right" label="操作" width="125">
              <template #default>
                <el-space :size="0" :spacer="spacer">
                  <HLink @click="trackLog">跟踪物流</HLink>
                  <HLink @click="viewDetail">查看</HLink>
                </el-space>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="footer">
          <div class="btns">
            <HPlainButton @click="printAll">批量打印</HPlainButton>
          </div>
          <div style="display: flex; align-items: center; gap: 5px">
            <Pagination />
            <HPlainButton @click="confirm">确定</HPlainButton>
          </div>
        </div>

        <!-- 物流详细信息弹窗 -->
        <HModal v-model="detailDialog" title="物流详细信息">
          <div class="detail-dialog">
            <div class="table">
              <table>
                <colgroup>
                  <col width="90" />
                  <col />
                </colgroup>
                <tbody>
                  <tr>
                    <td class="bg-gray"><b>物流公司</b></td>
                    <td>顺丰速运【手动】</td>
                  </tr>
                  <tr>
                    <td class="bg-gray"><b>物流单号</b></td>
                    <td>SF0009</td>
                  </tr>
                  <tr>
                    <td class="bg-gray"><b>物流状态</b></td>
                    <td class="flex-justify-between">
                      已揽件
                      <HPlainButton @click="update">更新</HPlainButton>
                    </td>
                  </tr>
                  <tr>
                    <td class="bg-gray"><b>发货单据</b></td>
                    <td></td>
                  </tr>
                  <tr>
                    <td class="bg-gray"><b>发货时间</b></td>
                    <td>2023-07-01 00:00:00</td>
                  </tr>
                </tbody>
              </table>
              <table class="addr">
                <colgroup>
                  <col width="90" />
                  <col />
                </colgroup>
                <tbody>
                  <tr>
                    <td class="bg-gray"><b>发货地址</b></td>
                    <td>admin 18088888888 广东省-中山市-东凤镇-详云路5档51号</td>
                  </tr>
                  <tr>
                    <td class="bg-gray"><b>收货地址</b></td>
                    <td>俊 15676899647 广西壮族自治区-北海市-银海区-银滩镇-测试地址</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </HModal>

        <!-- 物流订单跟踪弹窗 -->
        <HModal v-model="trackDialog" title="物流订单跟踪" size="small">
          <div class="track-dialog">
            <div class="card">
              <div class="icon">
                <el-icon>
                  <Van />
                </el-icon>
              </div>
              <div class="text">
                <div class="name">物流公司：顺丰速运</div>
                <div class="num">物流单号：SF0009</div>
              </div>
            </div>
          </div>
        </HModal>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import Pagination from '@/components/Pagination/index.vue'
  import { ref, h } from 'vue'
  import { ElMessageBox, ElMessage, ElDivider } from 'element-plus'
  import { Search, Van } from '@element-plus/icons-vue'
  import DateRange from '@/components/DateRange.vue'
  import HPlainButton from '@/components/common/button/HPlainButton.vue'
  import HLink from '@/components/common/link/HLink.vue'
  import { HModal } from '@/components/common'
  import pageComponentName from '@/config/page-component-name'

  defineOptions({
    name: pageComponentName.storage.logisticsList,
  })

  // 间距组件的间隔符
  const spacer = h(ElDivider, {
    direction: 'vertical',
    style: 'display: flex; align-items: center;',
  })

  const value1 = ref('')
  const value2 = ref('')
  const value3 = ref('')

  // 开始日期
  const startDate = ref('')

  // 结束日期
  const endDate = ref('')

  const input = ref('')
  const size = ref<'default' | 'large' | 'small'>('large')
  const select = ref('')
  const trackDialog = ref(false)
  const detailDialog = ref(false)

  //列表序号
  const indexMethod = (index: number) => {
    return (index + 1) * 1
  }

  // 底部确认
  const confirm = () => {
    // 确认事件
  }

  // 更新物流状态
  const update = () => {
    ElMessageBox.alert('更新成功', '提示', {
      confirmButtonText: '关闭',
      type: 'success',
      autofocus: false,
    })
  }

  // 获取表格选中的数据
  const selecttion = ref([])
  const handleChange = (val: any[]) => {
    if (val.length != 0) {
      val.forEach((item: { name: any }) => {
        if (Object.values(selecttion.value).indexOf(item.name) == -1) {
          selecttion.value.push(item.name)
        } else {
          selecttion.value = selecttion.value.filter((i) => i == item.name)
        }
      })
    } else {
      selecttion.value = []
    }
  }

  // 批量打印
  const printAll = () => {
    if (selecttion.value.length == 0) {
      ElMessage({
        message: '请勾选需要打印的物流！',
        type: 'warning',
      })
      return
    }
  }

  // 查看
  const viewDetail = () => {
    detailDialog.value = true
  }

  // 跟踪物流
  const trackLog = () => {
    trackDialog.value = true
  }

  const options = [
    {
      value: '全部类型',
    },
    {
      value: '全部品牌',
    },
    {
      value: '全部分类',
    },
  ]
  const shortcuts = [
    {
      text: '上周',
      value: () => {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
        return [start, end]
      },
    },
    {
      text: '上个月',
      value: () => {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
        return [start, end]
      },
    },
    {
      text: '上 3 个月',
      value: () => {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
        return [start, end]
      },
    },
  ]
  const tableData = [
    {
      date: 'LS23050905092127718284',
      name: 'ZGWXRD000000903',
      state: '订货散客 18088888888 广西壮族自治区-百色市-隆林各族自治县--东门东街道18号',
      city: '深圳市南山区维修店',
      address: '2023-04-26 11:31:01',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '20230602590500824',
      name: '2016-05-02',
      state: 'California',
      city: '自动派单测试',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-01',
      name: 'Tom1',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
    {
      date: '2016-05-03',
      name: 'Tom2',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
    {
      date: '2016-05-04',
      name: 'Tom3',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-01',
      name: 'Tom4',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
    {
      date: '2016-05-03',
      name: 'Tom5',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-02',
      name: 'Tom6',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
    {
      date: '2016-05-04',
      name: 'Tom7',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-01',
      name: 'Tom8',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
  ]

  // 日期范围选择器组件
  const dateRangeRef = ref<InstanceType<typeof DateRange> | null>(null)

  // 开始日期是否大于结束日期
  const isStartDateGreaterThanEndDate = ref(false)

  // 日期更新事件
  const handleDateChange = (param: {
    startDate: string
    endDate: string
    isStartDateGreaterThanEndDate: boolean
  }) => {
    startDate.value = param.startDate
    endDate.value = param.endDate
    isStartDateGreaterThanEndDate.value = param.isStartDateGreaterThanEndDate
    if (param.isStartDateGreaterThanEndDate) {
      ElMessage({
        type: 'error',
        message: '开始日期不能大于结束日期',
      })
    }
  }
</script>

<style scoped lang="scss">
  @import './index';
</style>
